<template>
  <div class="prcList">
    <div class="shouSuo">
      <div class="left">礼物列表</div>
    </div>
    <Loading v-if="loading"></Loading>
    <div class="info" v-else>
      <table class="listInfo" v-if="listStart">
        <thead>
          <tr>
            <td>编号</td>
            <td>名称</td>
            <td>图标</td>
            <td>价格</td>
            <td>魅力值</td>
            <td>销量</td>
            <td>排序值</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in tableData">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td><img class="logo" :src='item.image'></td>
            <td>{{item.price}}</td>
            <td>{{item.charm}}</td>

            <td>{{item.sale_count}}</td>
            <td>{{item.sort}}</td>
            <td>
              <a @click="getMore(item)">修改</a>
              <a @click="getDelete(item)">删除</a>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="pageList" v-if="listStart">
        <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="tableNum" :total="tableCont">
        </el-pagination>
      </div>
      <!--修改商品-->
      <div class="itemInfo" v-if="showStart">
        <div class="upBg"></div>
        <div class="formBox">
          <p class="item"><span class="name">礼物名称 ：</span><input v-model="date.name" class="slong" placeholder="请输入内容"></input></p>
          <p class="item"><span class="name">礼物图片 ：</span>
              <img class="t2" :src="date.image">
              <a href="javascript:;" class="file">选择文件<input type="file" @change="upImg" id="imgTest" class="mel" accept=".gif,.jpg,.jpeg,.png"></a>
          </p>
          <p class="item"><span class="name">礼物价格 ：</span>
              <input v-model="date.price" value="" class="solt" placeholder="请输入内容"></input>
          </p>

          <p class="item"><span class="name">排序值 ：</span>
              <input type="number" v-model="date.sort" value="" class="solt" placeholder="请输入内容"></input>
          </p>

          <p class="item inputBox">
            <button @click="submit" class="submitInput">确定</button>
            <button @click="close" class="close">取消</button>
          </p>
        </div>
      </div>
    </div>

  </div>
  </div>
</template>
<script>
import Vue from 'vue'
import Loading from '@/components/loading'
import axios from 'axios'
import { Get, Post ,Put ,Delete} from '@/config/api'
export default {
  name: 'prcList',
  data() {
    return {
      loading: false,
      upStatic: false,
      prcList:[],//商品目录列表
      itemStart:'',//商品显示类别
      indexStart:99,//当前栏目id
      tableData: [],
      tableNum: 20, //每页显示多少条
      tableCont: 0, //一共有多少条信息
      tablePage: 1, //当前页码
      listStart: true, //列表窗口
      showStart: false, //修改窗口
      imgStart: false, //相册窗口
      descStart: false, //详情窗口
      prcType:[],
      date:{
        id:'',
        name:'',
        price:'',
        charm:'',
        image:'',
        sort:''
      }
    }
  },
  mounted() {
    this.getData()
  },
  components: {
    Loading
  },
  computed:{
    sonData(){
      let data
      for(let i=0;i<this.prcType.length;i++){
        if(this.prcType[i].id==this.last){
          data=this.prcType[i].son
        }
      }
      return data
    }
  },
  methods: {
    //排序
    paixu(val){
      this.getC=val
      this.getData(this.itemStart,1)
    },
    //获取数据
    async getData(num) {
      let reg=await Get('/gift?_sort=id&page='+num,this.$store.state.token)
      console.log(reg)
      this.tableData=reg.data;
      this.tableCont=reg.meta.pagination.total
      this.loading=false
    },
    //分页
    handleCurrentChange(val) {
      this.tablePage = val
      this.getB=val
      this.getData(this.itemStart,val)
    },
    //信息详情
    getMore(e) {
      this.date.id = e.id
      this.date.name = e.name
      this.date.price = e.price
      this.date.charm = e.charm
      this.date.image = e.image
      this.date.sort = e.sort
      this.showStart = true
      this.listStart = false
    },
    //提交商品修改信息
    async submit() {
      let data;
      this.$store.dispatch("loadOpen");
      if (this.date.image.length < 100) {
        data = {
          "store_id":this.date.store_id,
          "name":this.date.name,
          "price":this.date.price,
          "charm":this.date.charm,
          "sort":this.date.sort
        }
      } else {
        data = {
          "store_id":this.date.store_id,
          "name":this.date.name,
          "price":this.date.price,
          "image":this.date.image,
          "sort":this.date.sort
        }
      }
      await Put('/gift/'+this.date.id,this.$store.state.token,data).then(function(){
        
      })
      this.$store.dispatch("loadClose");
      this.showStart = false
      this.listStart=true
      this.getData()
    },
    //上传商品
    upImg(e) {
      let file = e.target.files[0]; //input 
      if( file.size > 0.3*1024*1024 ){  //用size属性判断文件大小不能超过200k
        alert( "你上传的文件太大了！" ) 
      }else{
        let that=this
        let reader = new FileReader(); 
        reader.readAsDataURL(file); 
        reader.onload = function(e){ 
          var res = this.result; 
          that.date.image=this.result 
        } 
      } 
    },
    //删除商品
    async getDelete(e) {
      if (this.Check()) {
        this.$store.dispatch("loadOpen");
        let that=this
        await Delete('/goods/' + e.id,this.$store.state.token).then(function(reg){
          alert('删除成功')
        }).catch(function(err){
          alert(err.data.message)
        })
        this.$store.dispatch("loadClose");
        this.getData(this.itemStart,1)
        this.$set()
      }
    },
    close(){
      this.showStart = false
    }
  }
}

</script>
